<template>
  <div class="font-inter bg-gray-50 text-dark">
    <!-- 项目详情内容 -->
    <main class="pt-32 pb-16">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
          <!-- 主内容区域 -->
          <div class="lg:col-span-3">
            <!-- 项目头部 -->
            <div
              v-if="project"
              class="project-header rounded-xl text-white p-8 mb-8"
            >
              <div class="flex flex-wrap gap-2 mb-4">
                <span
                  v-for="tech in project.technologies || []"
                  :key="tech"
                  class="tag bg-white/20 text-white text-xs font-bold px-3 py-1 rounded-full"
                >
                  {{ tech }}
                </span>
              </div>
              <h1
                class="text-lg md:text-xl font-bold mb-4"
                style="font-size: 1.125rem; line-height: 1.75rem"
              >
                {{ project.title }}
              </h1>
              <p class="text-white/90 mb-6 max-w-2xl">
                {{ project.description }}
              </p>
              <div class="flex flex-wrap items-center gap-4 text-sm">
                <div class="flex items-center">
                  <Icon name="fa:calendar" class="mr-2" />
                  <span>{{ formatDate(project.created_at) }}</span>
                </div>
                <div class="flex items-center">
                  <Icon name="fa:eye" class="mr-2" />
                  <span>{{ project.view_count || 0 }}次浏览</span>
                </div>
              </div>

              <!-- 项目链接 -->
              <div class="flex flex-wrap gap-3 mt-6">
                <a
                  v-if="project.github_url"
                  :href="project.github_url"
                  target="_blank"
                  class="inline-flex items-center gap-2 px-4 py-2 bg-gray-900 text-white rounded-lg hover:bg-gray-800 transition-colors font-medium shadow-sm"
                >
                  <Icon name="fa:github" />
                  GitHub
                </a>
                <a
                  v-if="project.demo_url"
                  :href="project.demo_url"
                  target="_blank"
                  class="inline-flex items-center gap-2 px-4 py-2 bg-primary text-white rounded-lg hover:bg-blue-600 transition-colors font-medium shadow-sm"
                >
                  <Icon name="fa:play" />
                  在线演示
                </a>
              </div>
            </div>
            <div v-else class="bg-white rounded-xl shadow-sm p-8 mb-8">
              <div class="text-center py-8">
                <p class="text-gray-500">加载中...</p>
              </div>
            </div>

            <!-- 项目内容 - Markdown 渲染 -->
            <MdPreview
              v-if="project && project.content"
              :modelValue="project.content || ''"
              class="bg-white rounded-xl shadow-sm p-6 mb-8 content-card animate-fade-in"
              editorId="project-content"
            />
            <div
              v-else-if="!project"
              class="bg-white rounded-xl shadow-sm p-6 mb-8 content-card"
            >
              <div class="text-center py-8">
                <p class="text-gray-500">加载项目内容中...</p>
              </div>
            </div>
          </div>

          <!-- 侧边栏 -->
          <div class="lg:col-span-1">
            <div class="sticky-sidebar space-y-6">
              <!-- 项目信息 -->
              <div
                v-if="project"
                class="bg-white rounded-xl shadow-sm p-6 content-card"
              >
                <h3 class="text-lg font-semibold mb-4">项目信息</h3>

                <div class="space-y-4">
                  <div>
                    <p class="text-gray-500 text-sm mb-1">技术栈</p>
                    <div class="flex flex-wrap gap-2 mt-1">
                      <span
                        v-for="tech in project.technologies || []"
                        :key="tech"
                        class="px-2 py-1 bg-gray-100 text-gray-700 text-xs rounded"
                      >
                        {{ tech }}
                      </span>
                    </div>
                  </div>

                  <div v-if="project.role">
                    <p class="text-gray-500 text-sm mb-1">岗位角色</p>
                    <p class="font-medium">{{ project.role }}</p>
                  </div>

                  <div>
                    <p class="text-gray-500 text-sm mb-1">项目状态</p>
                    <span
                      class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800"
                    >
                      <span
                        class="w-1.5 h-1.5 mr-1.5 rounded-full bg-green-500"
                      ></span>
                      {{
                        project.status === "published"
                          ? "已发布"
                          : project.status === "draft"
                          ? "草稿"
                          : "已归档"
                      }}
                    </span>
                  </div>

                  <div>
                    <p class="text-gray-500 text-sm mb-1">创建时间</p>
                    <p class="font-medium">
                      {{ formatDate(project.created_at) }}
                    </p>
                  </div>

                  <div>
                    <p class="text-gray-500 text-sm mb-1">更新时间</p>
                    <p class="font-medium">
                      {{ formatDate(project.updated_at) }}
                    </p>
                  </div>

                  <div>
                    <p class="text-gray-500 text-sm mb-1">浏览量</p>
                    <p class="font-medium">{{ project.view_count || 0 }} 次</p>
                  </div>
                </div>
              </div>

              <!-- 标签云 -->
              <div
                v-if="project"
                class="bg-white rounded-xl shadow-sm p-6 content-card"
              >
                <h3
                  class="font-bold mb-4 text-primary"
                  style="font-size: 1.125rem"
                >
                  标签云
                </h3>
                <div class="flex flex-wrap gap-2">
                  <a
                    v-for="tech in project.technologies || []"
                    :key="tech"
                    href="#"
                    class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm hover:bg-primary hover:text-white transition-colors"
                  >
                    {{ tech }}
                  </a>
                </div>
              </div>
              <div
                v-else
                class="bg-white rounded-xl shadow-sm p-6 content-card"
              >
                <h3
                  class="font-bold mb-4 text-primary"
                  style="font-size: 1.125rem"
                >
                  项目信息
                </h3>
                <div class="text-center py-4">
                  <p class="text-gray-500">加载中...</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
import { MdPreview } from "md-editor-v3";
import "md-editor-v3/lib/preview.css";

// 获取路由参数
const route = useRoute();
const projectId = route.params.id as string;

// 获取项目数据
const { data: projectData } = await useLazyFetch(`/api/projects/${projectId}`);
const project = computed(() => {
  const response = projectData.value as any;
  // 安全地检查数据结构
  if (!response || !response.success || !response.data) {
    return null;
  }
  // 确保technologies字段存在且是数组
  if (!response.data.technologies) {
    response.data.technologies = [];
  }
  return response.data;
});

// 格式化日期
const formatDate = (dateString: string) => {
  return new Date(dateString).toLocaleDateString("zh-CN", {
    year: "numeric",
    month: "long",
    day: "numeric",
  });
};

// SEO 设置
useHead(() => ({
  title: project.value?.title
    ? `${project.value.title} - 项目详情`
    : "项目详情",
  meta: [
    {
      name: "description",
      content: project.value?.description || "项目详情页面",
    },
    { property: "og:title", content: project.value?.title || "项目详情" },
    {
      property: "og:description",
      content: project.value?.description || "项目详情页面",
    },
  ],
}));
</script>

<style scoped>
.font-inter {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
}

.text-dark {
  color: #1a202c;
}

.text-primary {
  color: #3b82f6;
}

.bg-primary {
  background-color: #3b82f6;
}

.bg-primary\/10 {
  background-color: rgba(59, 130, 246, 0.1);
}

.project-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
  overflow: hidden;
}

.project-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="white" opacity="0.1"/><circle cx="10" cy="60" r="0.5" fill="white" opacity="0.1"/><circle cx="90" cy="40" r="0.5" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  pointer-events: none;
}

.tag {
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.content-card {
  border: 1px solid #e5e7eb;
  transition: all 0.3s ease;
}

.content-card:hover {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.sticky-sidebar {
  position: sticky;
  top: 2rem;
}

.animate-fade-in {
  animation: fadeIn 0.6s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .sticky-sidebar {
    position: static;
  }
}

@media (max-width: 768px) {
  .project-header {
    padding: 1.5rem;
  }

  .content-card {
    padding: 1rem;
  }
}

/* md-editor-v3 预览样式 */
.md-editor-preview-wrapper {
  border: none !important;
  box-shadow: none !important;
}

.md-editor-preview {
  padding: 0 !important;
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style>
